import {Component, EventEmitter, Inject, Input, Output} from '@angular/core';
import {DOCUMENT} from '@angular/common';
import {Button} from '../../entity/button';

@Component({
    selector: 'app-pop-dialog',
    templateUrl: './pop-dialog.component.html',
    styleUrls: ['./pop-dialog.component.css']
})
export class PopDialogComponent {
    static NO_SCROLL = 'no-scroll';

    /**
     * 是否显示
     * @type {boolean}
     */
    private _dialogDisplay = true;
    @Output() dialogDisplayChange = new EventEmitter<boolean>();

    @Input()
    header: string;

    @Input()
    id: string;

    @Input()
    width: number;

    @Input()
    height: number;

    /**
     * 关闭按钮类型：0=没有 1=在页面右上角 2=在窗口右上角
     * @type {number}
     */
    @Input()
    closeType = 1;

    @Input()
    footerBtns: Button<any>[];

    constructor(@Inject(DOCUMENT) private document: Document) {

    }

    get dialogDisplay(): boolean {
        return this._dialogDisplay;
    }

    @Input()
    set dialogDisplay(value: boolean) {
        if (value) {
            this.show();
        } else {
            this.hide();
        }
    }

    hide(): void {
        if (!this._dialogDisplay) {
            return;
        }
        this._dialogDisplay = false;
        const classList = this.document.body.classList;

        if (classList && classList.contains(PopDialogComponent.NO_SCROLL)) {
            classList.remove(PopDialogComponent.NO_SCROLL);
        }
        this.dialogDisplayChange.emit(this._dialogDisplay);
    }


    show(): void {
        this._dialogDisplay = true;
        const classList = this.document.body.classList;
        if (!classList) {
            this.document.body.className = PopDialogComponent.NO_SCROLL;
        } else {
            if (!classList.contains(PopDialogComponent.NO_SCROLL)) {
                classList.add(PopDialogComponent.NO_SCROLL);
            }
        }
        this.dialogDisplayChange.emit(this._dialogDisplay);
    }
}
